<template>
	<view class="constellation">
		<!-- <view class="flex_row_start_center">
			<view>节气</view>
			<picker mode="selector" :value='index' :range="ranglist" @change="change1">
				<view class="pick_item" >
					<view v-if="consName">{{consName}}</view>
					<view v-else>请选择节气</view>
				</view>
			</picker>
		</view> -->
		
		<!-- <view @click="getConstellation" class="constellation_button flex_row_center_center">提交</view> -->
	    <view class="cont_box">
			<view class="list" v-for="(item,index) in info" :key="index">
				<view class="title" >
				<view class="line">
					
				</view>
				<view class="">
					{{item.name}}
				</view>
				</view>
				<view class="item"  >
					<view class="title_i">
						<view class="dot">
						</view>
						<view class="tetx">
							简介：
						</view>
						</view>
					<jyfParser style="color: #5f5f5f;" :html="item.des" :isAll="true"></jyfParser>
				</view>
				<view  class="item"  >
					<view class="title_i" >
						<view class="dot">
						</view>
						<view class="tetx">
							节气由来：
						</view>
						</view>
					<jyfParser :html="item.youLai" :isAll="true"></jyfParser>
				</view>
				<view  class="item"  >
					<view class="title_i">
						<view class="dot">
						</view>
						<view class="tetx">
							节气习俗：
						</view>
						</view>
					<jyfParser :html="item.xiSu" :isAll="true"></jyfParser>
				</view>
				<view  class="item"  >
					<view class="title_i">
						<view class="dot">
						</view>
						<view class="tetx">
							节气养生建议：
						</view>
						</view>
					<jyfParser :html="item.heath" :isAll="true"></jyfParser>
				</view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser'
	export default{
		components:{jyfParser},
		data(){
			return{
				info:[],
			}
		},
		onLoad(options){
			console.log(options.params);
			this.getConstellation(options.params)
		},
		methods:{
			getConstellation(item){
				uni.request({
					url:'https://apis.juhe.cn/fapig/solarTerms/query',
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method:'GET',
					data:{
						key:'04e2d6b18ad4a0778ffd4db8bac0833d',
						name:item,//关键字
					},
					success: (res) => {
					        console.log('res',res);
						this.info=res.data.result
					}
				})
			},
			change1(value){
				this.consName=this.ranglist[value.detail.value]
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		// padding: 16rpx;
	}
	.constellation{
		// padding: 10rpx 10rpx 30rpx;
		border-radius: 12rpx;
		background-color: #f2f2f2;
		letter-spacing: 3rpx;
		.cont_box{
			.list{
				.title{
					display: flex;
					font-size: 38rpx;
					font-weight: 550;
					letter-spacing: 8rpx;
					color: #88b7ff;
					background-color: #fff;
					padding: 10rpx 30rpx 20rpx;
					border-radius: 10rpx;
					border-bottom: 2rpx solid #cecece;
					.line{
						width: 10rpx;
						height: 50rpx;
						background-color: #88b7ff;
						 border-radius: 5rpx;
						 margin-right: 15rpx;
					}
				}
				.item{
					margin-bottom: 20rpx;
				  //    /deep/p{
						//  color: #5f5f5f;
					 // }
					 padding: 20rpx 30rpx;
					 border-radius: 10rpx;
					 background-color: #fff;
					// border-bottom: 2rpx solid #cecece;
					.title_i{
						font-size: 32rpx;
						font-weight: bold;
						color: #88b7ff;
						padding: 16rpx 0;
						display: flex;
						align-items: center;
						.dot{
							width: 10rpx;
							height: 10rpx;
							background-color: #88b7ff;
						    border-radius: 5rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
	.pick_item{
		width: 500rpx;
		height: 50rpx;
		margin-left: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	
	.constellation_button{
		width: 700rpx;
		height: 80rpx;
		margin-top: 30rpx;
		background-color: #0982d9;
		border-radius: 12rpx;
		color: #fff;
	}
</style>